<template>
	<view id="page_content">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header">

				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>{{$t('Control-Panel')}}</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>

			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom">
				<view class="totals">
					<view class="total_block today">
						<image class="icon" src="/static/images/entryscreen/coins_stack.png" mode="widthFix">
							<view class="amount">
								<view class="icon-matic"></view>
								<view class="amount-text">{{teamData['todayRhd']}}</view>
							</view>
							<view class="title">{{$t('Today-earnings')}}(RHD)</view>
					</view>
					<view class="total_block today" @click="openWalletRhd()">
						<image class="icon" src="/static/images/entryscreen/coins_stack.png" mode="widthFix">
							<view class="amount">
								<view class="icon-matic"></view>
								<view>{{teamData['balance']}}</view>
							</view>
							<view class="title">{{$t('total-revenue')}}(RHD)</view>
					</view>

				</view>
				<view class="totals mat-20">
					<view class="total_block today">
						<image class="icon" src="/static/images/entryscreen/earning_stats.png" mode="widthFix">
							<view class="amount">
								<view class="icon-matic"></view>
								<view>{{teamData['coin']}}</view>
							</view>
							<view class="title">{{$t('total-revenue')}}(GAS)</view>
					</view>
					<view class="total_block today">
						<image class="icon" src="/static/images/entryscreen/earning_stats.png" mode="widthFix">
							<view class="amount">
								<view class="icon-matic"></view>
								<view>{{teamData['point']}}</view>
							</view>
							<view class="title">{{$t('total-revenue')}}(PXL)</view>
					</view>

				</view>
				<view class="tiers">
					<view class="tier_block tier1">
						<image class="icon" src="/static/images/entryscreen/group_tier_1.png" mode="widthFix">
							<view class="title">{{$t('team')}}</view>
							<view class="stats">
								<view class="stat_block today">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['rcounts']}}
									</view>
									<view class="text">{{$t('recommend')}}</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['_leftmoney']}}
									</view>
									<view class="text">{{$t('Left-money')}}</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['_rightmoney']}}
									</view>
									<view class="text">{{$t('Right-money')}}</view>
								</view>
							</view>
					</view>
					<view class="tier_block tier2">
						<image class="icon" src="/static/images/entryscreen/group_tier_2.png" mode="widthFix">
							<view class="title">当日统计</view>
							<view class="stats">
								<view class="stat_block today">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['todayReferee']}}
									</view>
									<view class="text">直推奖</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['todayFast']}}
									</view>
									<view class="text">加速奖</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['todayThink']}}
									</view>
									<view class="text">感恩奖</view>
								</view>
							</view>
							<view class="stats">
								<view class="stat_block today">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['todayTeam']}}
									</view>
									<view class="text">社区奖</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['todayCommon']}}
									</view>
									<view class="text">平级奖</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['todayBonus']}}
									</view>
									<view class="text">分红</view>
								</view>
							</view>
					</view>
					<!-- 	<view class="tier_block tier3">
						<image class="icon" src="/static/images/entryscreen/group_tier_3.png" mode="widthFix">
							<view class="title">{{$t('team')}}02</view>
							<view class="stats">
								<view class="stat_block today">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['nodeFloorOne']}}
									</view>
									<view class="text">{{$t('Star-activation')}}</view>
								</view>
								<view class="stat_block past">
									<view class="people"></view>
									<view class="amount">
										<view class="icon-matic"></view>{{teamData['nodeFloorTwo']}}
									</view>
									<view class="text">{{$t('viewidend-recipients')}}</view>
								</view>
							</view>
					</view> -->

				</view>


				<view class="connect-wallet-modal-background" v-if="showPurse" @click.stop>
					<view class="connect-wallet-modal-container" old="true">
						<view class="connect-wallet-modal-header-desc">与连接</view>
						<view class="connect-wallet-modal-subheader-desc"></view>
						<view class="connect-wallet-modal-content"><button class="connect-wallet-modal-close-btn"
								@click="closePurse"></button>
							<view class="connect-wallet-modal-social-btn">
								<image src="/media/images/connect_modal/social.png"
									class="connect-wallet-modal-default-img">
									<view class="connect-wallet-modal-social-desc">社交钱包</view>
							</view>
							<view class="connect-wallet-modal-center-desc"></view>
							<view class="connect-wallet-modal-login-btns-row" first="true">
								<view class="connect-wallet-modal-default-btn">
									<image src="/media/images/connect_modal/coinbase.png"
										class="connect-wallet-modal-default-img">
										<view class="connect-wallet-modal-default-desc">Coinbase</view>
								</view>
								<view class="connect-wallet-modal-default-btn">
									<image src="/media/images/connect_modal/metamask.png"
										class="connect-wallet-modal-default-img">
										<view class="connect-wallet-modal-default-desc">Metamask</view>
								</view>
							</view>
							<view class="connect-wallet-modal-login-btns-row">
								<view class="connect-wallet-modal-walletconnect-btn">
									<image src="/media/images/connect_modal/walletConnect.png"
										class="connect-wallet-modal-default-img-walletconnect">
										<view class="connect-wallet-modal-default-desc">WalletConnect</view>
								</view>
							</view>
							<view class="connect-wallet-modal-login-btns-row-mobile">
								<view class="connect-wallet-modal-default-btn-coinbase">
									<image src="/media/images/connect_modal/coinbase.png"
										class="connect-wallet-modal-default-img-mobile-coinbase">
										<view class="connect-wallet-modal-default-desc">Coinbase</view>
								</view>
							</view>
							<view class="connect-wallet-modal-login-btns-row-mobile">
								<view class="connect-wallet-modal-default-btn-metamask">
									<image src="/media/images/connect_modal/metamask.png"
										class="connect-wallet-modal-default-img-mobile-metamask">
										<view class="connect-wallet-modal-default-desc">Metamask</view>
								</view>
							</view>
							<view class="connect-wallet-modal-login-btns-row-mobile">
								<view class="connect-wallet-modal-default-btn">
									<image src="/media/images/connect_modal/imToken.png"
										class="connect-wallet-modal-default-img-mobile">
										<view class="connect-wallet-modal-default-desc">Im token</view>
								</view>
								<view class="connect-wallet-modal-default-btn">
									<image src="/media/images/connect_modal/tp.png"
										class="connect-wallet-modal-default-img-mobile">
										<view class="connect-wallet-modal-default-desc">Pocket Wallet</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="popups_container" v-if="showLink">
				<view class="popup">
					<view class="close" @click="closeLink"></view>
					<!-- <view class="content"> -->
					<view class="new_campaign_form">
						<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header">
							<view class="input_label">我的代理会员链接昵称</view>
							<view class="input_box"><input class="name_input" maxlength="15" placeholder="命名您的代理会员链接"
									value=""></view>
							<view class="input_instruct">6 ~ 15个字符，只允许使用英文字母和数字。</view>
							<view class="gold_btn">创建链接</view>
					</view>
					<!-- </view> -->
				</view>
			</view>
		</view>
		
		<!-- rhd wallet -->
		<walletRhdPop :walletOpen="open_rhd_wallet" @closeWallet="closePop"
			@showTips="showTips" :amount="teamData['balance']"></walletRhdPop>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	import walletRhdPop from "@/components/nav/wallet_rhd_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop,
			walletRhdPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				open_wallet: false,
				open_rhd_wallet:false,
				teamData: '',
				current: 3,
				showTabbar: true,
				backgroundColor: '#191c1d',
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],

			};
		},
		onLoad: function() {

		},
		onShow() {
			if (this.tui.isLogin()) {
				this.hasToken = true;
				this.init();
			}
		},
		methods: {
			init() {
				let datas = {}
				let result = this.tui.request('api/user/userAccount', 'post', datas, 1000, 1, '', 'userAccount');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.teamData = value.data
					}
				})
			},
			tabbarSwitch(e) {

				this.current = e.index;

			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			openWalletRhd() {
				this.open_rhd_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
				this.open_rhd_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';
	// page {
	// 	// background-color: #0c0d13;
	// 	color: #fff;
	// 	font-family: "Barlow Semi Condensed", sans-serif;
	// 	// font-size: 1.3vw;
	// 	margin: 0;
	// 	padding: 0;
	// 	overflow: hidden;
	// }

	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}

	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>